/**
 * Created by ritamashin on 2017/11/10.
 */
import React, {Component, PropTypes} from 'react'
import {View, Text,StyleSheet,Image, TouchableOpacity} from 'react-native'
import Swiper from 'react-native-swiper'
import {SCREEN_WIDTH} from '../../../config'


export default class bannerView extends Component{

    static defaultProps = {
        dataArray :[],
        onPressBannerAction : PropTypes.func,
    }
    render(){
        let {containerStyle,dataArray} = this.props;

        return (
        <View style={[styles.wrapStyle, containerStyle]}>
            <Swiper
                    autoplay={true}
                    autoplayTimeOut = {2.5}
                    paginationStyle = {styles.paginationStyle}
                    //dot = {<View style={styles.dotStyle}/>}
            >
                {
                    this.renderImage()
                }


            </Swiper>
        </View>
        )
    }

    renderImage(){

        let dataArray = this.props.dataArray;
        if (dataArray.length === 0){
            return <View/>
        }

      return  dataArray.map((element, index)=>{

            if (this.props.onPressBannerAction === undefined){
               return  <View style={[{flex : 1}]} key = {index} >
                    <Image source={{uri : element.image_url}}
                           style={styles.imageStyle}/>
                </View>
            }else {
                return <TouchableOpacity style={{flex: 1}} key = {index}
                                         onPress={() => this.props.onPressBannerAction(element)}
                                         activeOpacity={1}
                >
                    <Image source={{uri : element.image_url}}
                           style={styles.imageStyle}/>
                </TouchableOpacity>
            }
        })

    }
}

const styles = StyleSheet.create({
    wrapStyle : {
        borderWidth : 0.5,
        borderColor : '#e0e0e0',
        height : SCREEN_WIDTH * 0.4,
        padding : 8,
    },
    imageStyle :{
        width : SCREEN_WIDTH,
        height : SCREEN_WIDTH * 0.4
    },
    paginationStyle : {
        width : 100,height: 10,
        alignSelf : 'center',
        position : 'absolute',
        top : SCREEN_WIDTH * 0.4 - 18,
        left : SCREEN_WIDTH * 0.5 - 50
    },
    dotStyle : {
        // backgroundColor:'gray',
        // width : 8,
        // height : 8,
        // borderRadius : 4,
    }
});